import React, { Component } from 'react'
import './Vie.css'
import { Select, } from 'antd';
import type { DatePickerProps } from 'antd';
import { DatePicker, Space, TimePicker, Input, Checkbox } from 'antd';
import dayjs from 'dayjs'
import type { CheckboxChangeEvent } from 'antd/es/checkbox';
import customParseFormat from 'dayjs/plugin/customParseFormat';
dayjs.extend(customParseFormat);
const { Option } = Select;

export default class Vie extends Component<any,any> {
    constructor(props:any){
        super(props)
    }
    // 返回到考勤设置页面
    retu=()=>{
        this.props.history.push('/Main/Leave/Work')
    }
    render() {
        return (
            <div>
                <h1>查看</h1>
                <div className='vie'>
                    <div className='xn'>
                        <div>
                            考勤学年：
                            <Select disabled allowClear placeholder='考勤学年' className='kqxn' defaultValue={this.props.location.query.record.year}>
                                <Option value={this.props.location.query.record.year}>{this.props.location.query.record.year}</Option>
                            </Select>
                        </div>
                        <div className='xn1'>
                            考勤学期：
                            <Select disabled allowClear placeholder='考勤学期' className='kqxn' defaultValue={this.props.location.query.record.term}>
                                <Option value={this.props.location.query.record.term}>{this.props.location.query.record.term}</Option>
                            </Select>
                        </div>
                    </div>
                    <div className='xq'>
                        <div>
                            学期开始：
                            <Space direction="vertical" >
                                <DatePicker className='kqxn' disabled placeholder={this.props.location.query.record.agin}/>
                            </Space>
                        </div>
                        <div className='xn1'>
                            学期结束：
                            <Space direction="vertical">
                                <DatePicker className='kqxn' disabled placeholder={this.props.location.query.record.over}/>
                            </Space>
                        </div>
                    </div>
                    <div className='kq'>
                        <div>
                            考勤开始：
                            <TimePicker className='kqxn' disabled placeholder={this.props.location.query.record.starttim}/>
                        </div>
                        <div className='xn1'>
                        考勤结束：
                        <TimePicker className='kqxn' disabled placeholder={this.props.location.query.record.overtim}/>
                        </div>
                    </div>
                    <div className='dk'>
                        <div>
                        打卡地点：
                        <Select allowClear disabled  placeholder='打卡范围' className='kqxn' defaultValue={this.props.location.query.record.loca}>
                            <Option value={this.props.location.query.record.loca}>{this.props.location.query.record.loca}</Option>
                        </Select>
                        </div>
                        <div className='xn1'>
                        打卡范围：
                        <input className='dkfw' placeholder='打卡范围' disabled value={this.props.location.query.record.range}></input>
                        </div>
                    </div>
                    <div className='bc'>
                        考勤班次：
                        <Checkbox checked={true}>周一</Checkbox>
                        <Checkbox checked={true}>周二</Checkbox>
                        <Checkbox checked={true}>周三</Checkbox>
                        <Checkbox checked={true}>周四</Checkbox>
                        <Checkbox checked={true}>周五</Checkbox>
                        <Checkbox checked={false}>周六</Checkbox>
                        <Checkbox checked={false}>周天</Checkbox>
                    </div>
                    <div className='pc'>
                        排除节假日：
                        <Checkbox checked={true}></Checkbox>
                    </div>
                    <div>
                        <button className='fh' onClick={this.retu}>返回</button>
                    </div>
                </div>
            </div>
        )
    }
}
